<%@ page language="java"  pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>员工登录页</title>
		<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
		
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
		<script src="js/jquery.tableSort.js"></script>

		
<style type="text/css">
<!--
body {
	font-family: 微软雅黑;
	text-align: center;
}

#id_logindiv {
	width: 400px;
	height: 210px;
	background-color: #EEEEEE;
	border: black 1px solid;
	display: inline-block;
	padding: 20px;
}

#id_logindiv .tcontent input {
	margin: 5px;
	vertical-align: middle;
	border: black 1px solid;
}

.tname {
	text-align: right;
	padding-right: 10px;
}

.tcontent {
	text-align: left;
	height: 40px;
}

.tcontent  img {
	border: black 1px solid;
	cursor: pointer;
}

.tcontent input{
	width:150px;
}
.redH1 {
	color:red;
}
#id_loginbtn {
	width: 100%;
	height: 40px;
}

#id_tail {
	height: 20px;
	width: 100%;
	text-align: right;
}
#accordion {
	text-align:left;
	width:500px;
	padding:100px;
}
-->
</style>
</head>
	<body>
		<h1>
			欢迎登录使用员工信息系统
		</h1>
		<div id="dialog" title="Dialog">
			<p>这个动画框呐，是用来显示一些内容地，它可以重定义大小，点击X可以关掉它。</p>
		</div>

		<div id="id_logindiv">
			<script type="text/javascript">
			<!--
				var btype;
				if($.browser.mozilla) btype = "Chrome";
				else if($.browser.msie) btype = "ie";
				else if($.browser.opera) btype = "Opera";
				else btype = "Unknown";
				document.writeln(btype);
			-->
			</script>
			<hr />
			<form action="empvalid.jsp" id="id_form" method="post" name="form1">
				<table width="100%">
					<tr>
						<td width="25%" class="tname redH1">
							员工姓名:
						</td>
						<td width="50%" class="tcontent">
							<input id="id_user" tabindex="1" name="useraccount" type="text" />
						</td>
						<td width="25%" rowspan="2" id="id_td">
							<input id="id_loginbtn" tabindex="4" type="button"
								onclick="doSubmit()" value="登录" />
						</td>
					</tr>
					<tr>
						<td class="tname" id="id_pwdhint">
							登录密码:
						</td>
						<td class="tcontent">
							<input id="id_pwd" tabindex="2" name="userpassword" type="password" />
						</td>
					</tr>
					<tr>
						<td class="tname">
							验证码:
						</td>
						<td class="tcontent">
							<input id="id_vcode" tabindex="3" name="validcode" type="text" />
						</td>
						<td class="tcontent">
							<a href="javascript:void(0);" id="id_link" onclick="doLink(getElementById('id_check'))">厌震马</a>
						</td>
					</tr>
				</table>
			</form>
			<hr />
			<div id="id_tail">
				<a href="javascript:void(0);" onclick="$('#dialog').dialog('open');return false;">点击验证码可刷新</a>
				<input type="checkbox" checked onclick="doCheck()" id="id_check">Check
				</input>
				<a href="#" onclick="$('#id_reg').dialog('open');return false;">注册用户</a>
			</div>
		</div>
		<div id="accordion">
			<div>
				<h3><a href="#">第一</a></h3>
				<div>
					<table id="id_table" border=1>
						<tr>
							<th><a href="javascript:$('#id_table').sortTable({onCol:1,keepRelationships:true})">ID</a></th>
							<th><a href="javascript:$('#id_table').sortTable({onCol:2,keepRelationships:true})">员工姓名</a></th>
							<th><a href="javascript:$('#id_table').sortTable({onCol:3,keepRelationships:true})">性别</a></th>
							<th><a href="javascript:$('#id_table').sortTable({onCol:4,keepRelationships:true})">年龄</a></th>
							<th><a href="javascript:$('#id_table').sortTable({onCol:5,keepRelationships:true})">电话</a></th>
						</tr>
						<tr>
							<td>1</td>
							<td>张小扬</td>
							<td>男</td>
							<td>25</td>
							<td>18911091234</td>
						</tr>
						<tr>
							<td>2</td>
							<td>吕震张</td>
							<td>男</td>
							<td>26</td>
							<td>18911092345</td>
						</tr>
						<tr>
							<td>3</td>
							<td>金淘</td>
							<td>女</td>
							<td>27</td>
							<td>18911093456</td>
						</tr>
					</table>
					<hr/>
					<a href="#" onclick="$('input').check();">一个链接</a>
				</div>
			</div>
			<div>
				<h3><a href="#">第二</a></h3>
				<div>这是第二个内容<input type="button" id="id_button" value="我是一个键键" onclick="jAlert({title:'通知',content:'干嘛点我啊。。'})"/></div>
			</div>
			<div>
				<h3><a href="#">第三</a></h3>
				<div>
					里面装的三号嘉宾
				</div>
			</div>
		</div>
		<div id="id_reg" class="ui-widget ui-widget-content ui-corner-all" title="用户注册">

        <p class="validateTips">所有的表单域都为必填项.</p>

        <form id="reg-form">
	        <fieldset>
	        	<table border="0">
	            <tr><td>用户:</td><td><input type="text" name="uname" id="uname" value=""/></td></tr>
	            <tr><td>密码:</td><td><input type="password" name="upass" id="upass" value=""/></td></tr>
	            <tr><td>email:</td><td><input type="text" name="email" id="email" value=""/></td></tr>
	            <tr><td>生日:</td><td><input type="text" readonly="readonly" name="birth" id="birth" value=""/></td></tr>
	        	</table>
	        </fieldset>
        </form>
    </div>


	</body>
	<script type="text/javascript">
	<!--
		var timerID = 0;
		$(function() {
				$("#id_user").focus();
				setTimeout("timerID = setInterval(\"doFall();\",10);",3000);
				$("#dialog").dialog({ autoOpen:false,height: 150,modal: true,show:"fade",hide:"fade" } );
				$("#id_reg").dialog({ 
					buttons:{
						注册:function(){
							alert("注册去喽");
							},
						取消:function(){
							$("#id_reg").dialog("close");
							}},
						autoOpen:false,
						modal:true,
						show:"slide",
						hide:"slide" });
				$("#accordion").accordion({ header: "h3" }).sortable();
				$("#id_button").button();
				$("#id_loginbtn").button();
				$("h3>a").toggle(function() {
					$("#accordion>div>div").animate({width:'hide',opacity:'hide'},"slow");
				},function() {
					$("#accordion>div>div").animate({height:'show',opacity:'show'},"slow");
				});
				$.fn.check = function() {
					return this.each(function(){this.checked = !this.checked;});
				};
				//$.each($.merge([0,1,2],[1,2,4]),function(i){alert(this);});
		});
		$( function () {
			$(document.body).css({'background':'white'});
			$("#id_link").prop("href","#");
			$("h1").eq(0).after("<div><b>H<sub>2</sub>O</b></div>");
			$("h1").eq(0).prepend($("#id_link").clone());
			$("h1").eq(0).append($("#id_link").attr('href'));
			$("td:contains('验证')").css({'color':'blue','background-color':'gray'});
			$("td").filter("#id_pwdhint").css({'background-color':$("#id_link").is("a")?"lime":"purple"});
			//$("td").next("#id_td").empty();
		});
		$("#id_logindiv").draggable();
		var myH1 = $("h1");
		$("h1").click(function() {
			$("<h1>被点了</h1>").appendTo("body");
			$(document.body).append("<h2>h1被点击了</h2>");
			$("td").each(function() {
				$(this).empty();
			});
			$("td").eq(2).html("没了");
			//$("td").get(2).innerHTML = "没了xx";
			//$(document.form1.elements).hide();
			$($("h1").eq(1)).add($("h2").eq(0)).wrap("<span style=\"color:lime;\"></span>");
			$("h1").eq(1).wrap($("a"));
		});
		$(myH1).addClass("redH1");
		function doSubmit() {
			if( $("#id_user").val().length<1) {
				jAlert({title:"错误",content:"用戶名不能為空"});
				$("#id_user").focus();
				return;
			}
			if( $("#id_pwd").val().length<1) {
				jAlert({title:"错误",content:"密碼不能為空"});
				$("#id_pwd").focus();
				return;
			}
			if( $("#id_vcode").val().length<1) {
				jAlert({title:"错误",content:"验证码不能為空"});
				$("#id_vcode").focus();
				return;
			}
			$("#id_form").submit();
		}
		var fallSpd = 0;
		var fallplus = 0.2;
		var bheight = document.body.clientHeight - $("#id_logindiv").height() -210;
		var lastoff = $("#id_logindiv").position().top;
		
		function doFall() {
			var doff = $("#id_logindiv").position().top;
			var loff = $("#id_logindiv").position().left;
			
			if(lastoff<bheight&&doff>=bheight&&fallSpd>0) {
				if(Math.abs(fallSpd*0.36)>1)	fallSpd = -fallSpd*0.6;
				else clearInterval(timerID);
			} else fallSpd += fallplus;
			lastoff = doff;
			//$("#id_tail").html(Math.abs(fallSpd*0.6));
			$("#id_logindiv").css({position:"absolute",'top':doff+fallSpd,'left':loff});   
		}
		function doCheck() {
			//$("td").toggleClass("redH1");
			//$("td").toggle("fast");
			//$("td").fadeOut("slow",function(){$(this).fadeIn("slow");});
			//$("form").slideUp("slow",function(){$(this).slideDown("slow");});
			$("form").slideToggle("slow");
		}
		function doLink(tar) {
			$.each({checkprop:$(tar).prop("checked"),checkattr:$(tar).attr("checked")},function(i) {
				jAlert({content: i+":"+this});
			});
			
		}
		function jAlert(op) {
			var params = {title:"Notification",content:"Click X to close"};
			if(op) $.extend(params,op);
			
			var altDiv = $("<div title='"+params.title+"'>"+params.content+"</div>").appendTo('body');
			$(altDiv).dialog({
					autoOpen:true,
					modal:true,
					show:"fade",
					hide:"fade",
					closeOnEscape:false,
					resizable:false,
					close:function() {
						$(altDiv).remove();
					},
					buttons: {
						"确定":function(){ $(this).dialog("close"); }
						}
				});
		}
	-->
	</script>
</html>